  <template>
      <div>
          <div class="top">
              <div class="topItem">
                  <img src="@/assets/icons/canlendar.png" alt="" style="width: 28px;height: 28px">
                  <div>公告:</div>
              </div>
              <div class="scroll-container">
                  <div class="scroll-text">天冷多加衣,母上大人喊你穿秋裤~</div>
              </div>
              <div style="padding-left: 5px;padding-top: 5px;">
                  <el-icon :size="20">
                      <Setting />
                  </el-icon>
              </div>
          </div>
          <div class="top_time">
              <el-calendar v-model="targetDate" />
          </div>
          <div v-if="messshow" @click="messshow = !messshow" style="" class="quarterLine"></div>
          <div v-if="!messshow" class="top_date">
              <div style="" class="quarterBox">
                  <el-icon :size="20">
                      <Clock />
                  </el-icon>
                  <p style="margin-left: 10px">距离三季度结束</p>
              </div>
              <div class="countdown-card">
                  <div class="card">
                      <div class="card-header">
                          <div class="countdown-time">
                              <div class="time-box" v-for="(value, label) in timeUnits" :key="label">
                                  <div class="time">
                                      <div class="number-container">
                                          <span :class="['number', `${label}`]">{{ value }}</span>
                                      </div>
                                      <span class="label">{{ label }}</span>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
              <div>
                  <el-button  type="primary" class="knowBut" @click="messshow = !messshow">知道了</el-button>
              </div>
          </div>
          <div class="projectCard">
              <div>
                  <el-tabs v-model="activeName" style="width: 100%;" editable @edit="handleTabsEdit">

                      <el-tab-pane label="提醒" name="0" class="tabPane_box">
                          <div v-for="(item,index) in 8" class="tabpaneBox">
                              <div>
                                  <el-icon :size="25">
                                      <Present />
                                  </el-icon>
                              </div>
                              <div style="flex: 1;margin-left: 10px;">今日有柳德焕等三人过生日</div>
                              <div>
                                  <el-radio-group v-model="radio1">
                                      <el-radio label="index"></el-radio>
                                  </el-radio-group>
                              </div>
                          </div>
                      </el-tab-pane>
                      <el-tab-pane label="日程" name="1">
                          <el-empty />
                      </el-tab-pane>
                      <el-tab-pane label="记事本" name="2">
                          <el-empty />
                      </el-tab-pane>
                      <el-tab-pane label="倒数日" name="3">
                          <el-empty />
                      </el-tab-pane>

                  </el-tabs>
                  <div style="width: 100%;text-align: right;padding: 10px 0px;">查看全部</div>
              </div>

          </div>
          <div class="messageItem">
              <p class="thankFont">
                  感谢有你，一路相伴
              </p>
              <div>
                  <el-input v-model="textarea" style="width: 100%" :rows="3" type="textarea" placeholder="说点好听的~~~" />
              </div>
              <div style="margin: 10px 0px;display: flex;justify-content: space-between;align-items: center">
                  <div style="display: flex">
                      <el-popover :visible="visible" placement="top" :width="160">
                          <EmojiPicker :native="true" @select="onVue3EmojiPicker" />
                          <template #reference>
                              <img src="@/assets/icons/meme.svg" @click="visible = !visible"
                                  style="width: 30px;height: 30px;margin-right: 10px" alt="">
                          </template>
                      </el-popover>
                      <img src="@/assets/icons/image.svg" style="width: 30px;height: 30px;margin-right: 10px" alt="">
                  </div>
                  <el-button size="small" type="primary"
                      style="width: 80px;height: 30px;font-size: 14px;float: right">发布</el-button>
              </div>
          </div>
          <div class="messageList">
              <el-tabs style="width: 28vw;background-color: white;padding: 2%" v-model="activeName1" class="demo-tabs">
                  <el-tab-pane name="first">
                      <template #label>
                          <span class="custom-tabs-label">
                              <el-icon :size="18">
                                  <calendar />
                              </el-icon>
                              <span>工作圈</span>
                          </span>
                      </template>
                      <div>
                          <!-- 评论 -->
                          <el-card style="max-width: 480px;margin-bottom: 10px;border: none;" v-for="item in 4">
                              <div style="display: flex;justify-content: space-between">
                                  <el-avatar :size="40"
                                      src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
                                  <div style="flex: 1;margin-left: 10px;">
                                      <p>刘定坚</p>
                                      <p style="color: rgba(0,0,0,0.4);margin-top: 4px">3分钟前</p>
                                  </div>
                                  <div style="color: rgba(0,0,0,0.4);">来自pc端</div>
                              </div>
                              <div style="margin-left: 3.4vw;margin-top: 6px">
                                  <div>时刻保持工作热情！！！</div>
                                  <div style="display: flex;width: 3vw;justify-content: space-between;margin-top: 15px">
                                      <el-icon :size="20" color="#409eff">
                                          <Star />
                                      </el-icon>
                                      <el-icon :size="20" color="#409eff">
                                          <ChatDotSquare />
                                      </el-icon>
                                  </div>
                              </div>
                              <!-- 评论的评论 -->
                              <div style="margin-top: 18px;background-color: #f2f2f2;padding: 2%;width: 100%;">
                                  <div style="display: flex;justify-content: space-between">
                                      <el-avatar :size="40"
                                          src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
                                      <div style="flex: 1;margin-left: 10px;">
                                          <div><span >刘定坚</span>:<span
                                                  style="margin-left: 10px">时刻保持工作热情！！</span>
                                          </div>
                                          <div style="color: rgba(0,0,0,0.4);margin-top: 4px">
                                              3分钟前
                                          </div>
                                      </div>
                                      <div style="color: rgba(0,0,0,0.4);">
                                          <div style="margin-top: 30px">
                                              <span>回复</span><span style="margin-left: 10px">删除</span>
                                          </div>
                                      </div>
                                  </div>
                                  <div
                                      style="display: flex;justify-content: space-between;margin-top: 10px;margin-left: 3.5vw">
                                      <div>
                                          <div><span>郭府城</span>回复<span
                                                  style="color: #409eff">@刘定坚</span>:<span
                                                  style="margin-left: 10px">时刻保持工作热情！！</span></div>
                                          <div style="color: rgba(0,0,0,0.4);margin-top: 4px">
                                              3分钟前
                                          </div>
                                      </div>
                                      <div style="color: rgba(0,0,0,0.4);">
                                          <div style="margin-top: 45px; white-space: nowrap;">
                                              <span>回复</span>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </el-card>
                      </div>

                  </el-tab-pane>
                  <el-tab-pane name="second">
                      <template #label>
                          <span class="custom-tabs-label">
                              <el-icon :size="18">
                                  <ChatLineRound />
                              </el-icon>
                              <span>话题</span>
                          </span>
                      </template>
                      Config
                  </el-tab-pane>
                  <el-tab-pane name="third">
                      <template #label>
                          <span class="custom-tabs-label">
                              <el-icon :size="18">
                                  <Loading />
                              </el-icon>
                              <span>公司动态</span>
                          </span>
                      </template>
                      Role
                  </el-tab-pane>
              </el-tabs>
          </div>
      </div>
  </template>

  <script lang="ts" setup>
  import EmojiPicker from "vue3-emoji-picker";
  import "vue3-emoji-picker/css";
  import { defineComponent } from 'vue'
  import { Setting, Clock, Plus, Present, Star, ChatDotSquare, CirclePlus } from "@element-plus/icons-vue";
  const activeName = ref<string>("0")
  const activeName1 = ref<string>("first")
  const textarea = ref<string>("")
  const radio1 = ref<string>("4")
  const messshow = ref<boolean>(false)
  const visible = ref(false)
  const text_1 = ref("");
  // 计算当前年份的第四季度结束时间：12月31日23:59:59
  const targetDate = new Date(); // 12月31日23:59:59

  // 用来显示剩余的时间
  const timeUnits = ref({
      days: 0,
      hours: 0,
      minutes: 0,
      seconds: 0
  });
  const onVue3EmojiPicker = (emoji) => {
      text_1.value += emoji.i;
      this.visible = false
      /* 结果示例
      {
          i: "ernes", // 表情图标
          n: ["kissing face"],
          r: "1f61a", // 包含肤色
          t: "neutral", // 肤色
          u: "1f61a" // 不带肤色
      }
      */
  };
  // 更新倒计时显示
  const updateTime = () => {
      const now = new Date();
      const timeDifference = targetDate.getTime() - now.getTime();

      if (timeDifference > 0) {
          const remainingSeconds = Math.floor(timeDifference / 1000);

          // 计算剩余的天、小时、分钟、秒
          timeUnits.value.days = Math.floor(remainingSeconds / (3600 * 24));
          timeUnits.value.hours = Math.floor((remainingSeconds % (3600 * 24)) / 3600);
          timeUnits.value.minutes = Math.floor((remainingSeconds % 3600) / 60);
          timeUnits.value.seconds = remainingSeconds % 60;
      } else {
          // 如果时间已到，清除定时器并显示活动结束信息
          clearInterval(timer);
          timeUnits.value = { days: 0, hours: 0, minutes: 0, seconds: 0 };
      }
  };

  // 设置倒计时的间隔，定期更新
  let timer: ReturnType<typeof setInterval>;

  onMounted(() => {
      updateTime(); // 初始化时间
      timer = setInterval(() => {
          updateTime();
      }, 1000); // 每秒更新一次
  });

  onUnmounted(() => {
      clearInterval(timer); // 清除定时器，防止内存泄漏
  });
  //新增日期
  const handleTabsEdit = () => {

  }
  </script>

  <style scoped lang="scss">
  .top {
      background-color: white;
      height: 6vh;
      display: flex;
      font-size: 16px;
      color: black;
      font-weight: bold;
      align-items: center;
      padding: 2%;
  }

  .topItem {
      width: 7vw;
      display: flex;
      align-items: center;
      justify-content: space-between
  }

  .scroll-container {
      line-height: 50px;
      width: 100%;
      /* 容器宽度 */
      height: 50px;
      /* 容器高度 */
      overflow: hidden;
      /* 隐藏超出容器的部分 */
      position: relative;
      font-size: 16px;
      color: #409eff;
      font-weight: normal;
  }

  .scroll-text {
      position: absolute;
      white-space: nowrap;
      /* 不换行 */
      animation: scroll-text 10s linear infinite;
      /* 动画：10秒滚动一次，线性过渡，循环 */
  }

  .tabPane_box {
      height: 300px;
      overflow: hidden;
  }

  .tabPane_box:hover {
      overflow: auto;
  }

  .tabPane_box::-webkit-scrollbar {
      width: 0px;
      /* 设置滚动条宽度 */
      height: 5px;
      /* 设置水平滚动条高度 */
      opacity: 0;
      /* 初始状态下滚动条透明 */
      transition: opacity 0.3s;
      /* 滚动条显示时渐变 */
  }

  .tabpaneBox {
      width: 100%;
      margin: 10px 10px 0px 0px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 2%;
      background-color: #f2f2f2;
      border-radius: 5px;
  }

  .tabpaneBox:hover {
      border: #409eff 1px solid;
  }

  .demo-tabs>.el-tabs__content {
      padding: 32px;
      color: #6b778c;
      font-size: 32px;
      font-weight: 600;
  }

  .demo-tabs .custom-tabs-label .el-icon {
      vertical-align: middle;
  }

  .demo-tabs .custom-tabs-label span {
      vertical-align: middle;
      margin-left: 4px;
  }

  @keyframes scroll-text {
      0% {
          left: 100%;
          /* 初始位置在右边 */
      }

      100% {
          left: -100%;
          /* 滚动到左边完全消失 */
      }
  }

  .top_time {
      margin-top: 15px;
  }

  .top_time :deep(.el-calendar-table .el-calendar-day) {
      height: 60px;
  }

  .quarterLine {
      margin-top: 10px;
      background-color: #409eff;
      height: 10px;
      border-radius: 10px
  }

  .quarterBox {
      display: flex;
      color: black;
      font-size: 16px;
      font-weight: bold;
      padding: 2%;
      align-items: center
  }

  .top_date {
      background-color: white;
      margin-top: 20px;
      padding: 2%;
  }

  .countdown-card {
      width: 350px;
      margin: 0 auto;
      text-align: center;
      font-family: Arial, sans-serif;
  }

  .knowBut {
      width: 100%;
      height: 40px;
      font-size: 18px;
      font-weight: bold
  }

  .card {
      border-radius: 8px;
      padding: 10px;
  }

  :deep(.el-card__body) {
      padding: 10px;
  }

  .card-header {
      margin-bottom: 10px;
  }

  .countdown-time {
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .time-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #409eff;
      border-radius: 4px;
      margin: 0 10px;
      padding: 5px;
      font-size: 24px;
      width: 60px;
      height: 60px;
      position: relative;
      overflow: hidden;
  }

  .time {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }



  .number {
      font-size: 30px;
      display: block;
      animation: scrollUp 1s forwards;
  }

  /* 动画效果 */
  @keyframes scrollUp {
      0% {
          transform: translateY(30px);
          opacity: 0;
      }

      50% {
          transform: translateY(-10px);
          opacity: 1;
      }

      100% {
          transform: translateY(0);
          opacity: 1;
      }
  }

  .label {
      font-size: 14px;
      margin-top: 5px;
      color: rgba(0, 0, 0, 0.4);
  }

  .projectCard {
      height: 55vh;
      background-color: white;
      margin-top: 20px;

      &>:first-child {
          display: flex;
          justify-content: space-between;
          flex-direction: column;
          padding: 2% 6% 2% 6%;
      }
  }

  .messageItem {
      margin-top: 20px;
      background-color: white;
      height: 23vh;
      padding: 2%;
  }

  .thankFont {
      color: #409eff;
      font-size: 24px;
      margin-bottom: 1%;
      font-family: '华文行楷'
  }

  .messageList {
      margin-top: 20px;
  }
  </style>
